<template>
  <el-card class="box-card">
    <div slot="header" style="text-align: left">
      <h3>订单号：{{ orderDetail.orderNo }}</h3>
    </div>
    <!--订单信息-->
    <div style="text-align: left">
      <h3>
        <i class="el-icon-s-promotion"></i>
        基本信息
      </h3>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="orderNo" label="订单号"></el-table-column>
      <el-table-column prop="createTime" label="时间"></el-table-column>
      <el-table-column prop="totalPrice" label="订单金额(元)"></el-table-column>
      <el-table-column prop="needPay" label="需要支付">
        <template #default="scope">
          <span v-if="scope.row.needPay">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="deliveryNo" label="物流单号">
        <template #default="scope">
          <span v-if="scope.row.deliveryNo">{{ scope.row.deliveryNo }}</span>
          <span v-else>暂无</span>
        </template>
      </el-table-column>
      <el-table-column prop="customerName" label="客户名称"></el-table-column>
      <el-table-column prop="customerBak" label="客户备注"></el-table-column>
      <el-table-column prop="orderStatus" label="状态">
        <template #default="scope">
          {{ GoodsOrderStatus_LABEL[scope.row.status] }}
        </template>
      </el-table-column>
    </el-table>
    <!--物流信息-->
    <div style="text-align: left">
      <h3>
        <i class="el-icon-s-promotion"></i>
        物流信息
      </h3>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="logisticsNo" label="物流单号">
        <template #default="scope">
          <span v-if="scope.row.deliveryNo">{{ scope.row.deliveryNo }}</span>
          <span v-else>暂无</span>
        </template>
      </el-table-column>
      <el-table-column prop="deliveryName" label="收货人"></el-table-column>
      <el-table-column prop="deliveryPhone" label="手机号"></el-table-column>
      <el-table-column prop="deliveryAddress" label="地址"></el-table-column>
    </el-table>

    <!--商品信息-->
    <div style="text-align: left">
      <h3>
        <i class="el-icon-s-promotion"></i>
        商品信息
      </h3>
    </div>
    <el-table :data="orderDetail.items" border style="width: 100%">
      <el-table-column prop="goodsId" label="商品图片">
        <template #default="scope">
          <img
            v-if="scope.row.goodsId"
            :src="AttachUtil.getFilePreview(scope.row.imageId)"
            style="width: 30px; height: 30px"
          />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名"></el-table-column>
      <el-table-column prop="price" label="单价"></el-table-column>
      <el-table-column prop="totalNum" label="数量"></el-table-column>
      <el-table-column prop="totalPrice" label="小计(元)"></el-table-column>
    </el-table>

    <!--流水信息-->
    <div style="text-align: left">
      <h3>
        <i class="el-icon-s-promotion"></i>
        资金流水信息
      </h3>
    </div>
    <el-table :data="orderDetail.bills" border style="width: 100%">
      <el-table-column prop="payNo" label="支付单号"></el-table-column>
      <el-table-column prop="customerName" label="客户昵称"></el-table-column>
      <el-table-column prop="cash" label="金额"></el-table-column>
      <el-table-column prop="createtime" label="流水时间"></el-table-column>
      <el-table-column prop="inAccount" label="收款账号"></el-table-column>
      <el-table-column prop="payAccount" label="支出账号"></el-table-column>
      <el-table-column prop="payType" label="支付方式"></el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const route = useRoute();
const orderId = ref(route.query.orderId as string);
import GoodsOrderAPI, {
  GoodsOrderStatus_LABEL,
  GoodsOrderDetail,
} from "@/api/goods/goodsOrder.api";
import AttachUtil from "@/utils/attachUtil";

defineOptions({
  name: "GoodsOrderDetail",
  inheritAttrs: false,
});

const orderDetail = reactive<GoodsOrderDetail>({
  items: [],
  bills: [],
});
const tableData = ref<GoodsOrderDetail[]>([]);

const loadDetail = () => {
  GoodsOrderAPI.detail(orderId.value).then((data) => {
    Object.assign(orderDetail, data);
    tableData.value = [data];
  });
};

onMounted(() => {
  loadDetail();
});
</script>
